<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">员工</a>
        <a>
          <cite>列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="layui-collapse" lay-accordion="">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">基本信息</h2>
        <form class="layui-form" action="">

            <div style="float: left;width:50%">
                <div class="layui-form-item">
                    <label class="layui-form-label">员工名字：</label>
                    <div class="layui-form-mid layui-font-black" th:text="${session.get('emplName')}"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所在部门：</label>
                    <div class="layui-form-mid layui-font-black" th:text="${session.get('deptName')}"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">系统角色：</label>
                    <div class="layui-form-mid layui-font-black" th:text="${session.get('roles')}"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">登录 ID：</label>
                    <div class="layui-input-inline">
                        <input id="emplCode" th:value="${session.get('emplCode')}" disabled="disabled" type="text" name="password" lay-verify="pass" style="color: gray" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-bg-gray" style="padding: 0px!important;"><button id="cnt_emplCode" type="button" class="layui-btn"  onclick="change(this)" controls="emplCode">编辑</button></div>
                </div>

            </div>

            <div style="float: right;width: 50%">

                <div class="layui-form-item">
                    <label class="layui-form-label">员工编号：</label>
                    <div class="layui-form-mid layui-font-black" th:text="${session.get('emplName')}"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">当前状态：</label>
                    <div class="layui-form-mid layui-font-black" th:text="${session.get('status')}"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">创建时间：</label>
                    <div class="layui-form-mid layui-font-black" th:text="${session.get('createTime')}"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话：</label>
                    <div class="layui-input-inline">
                        <input id="phone" th:value="${session.get('phone')}" disabled="disabled" type="text" oninput = "value=value.replace(/[^\d]/g,'')" name="password" lay-verify="pass" style="color: gray" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="padding: 0px!important;"><button id="cnt_phone" type="button" class="layui-btn" onclick="change(this)" controls="phone">编辑</button></div>
                </div>


            </div>



        </form>
    </div>

    <div class="layui-colla-item">
        <h2 class="layui-colla-title">修改密码</h2>
        <div class="layui-colla-content">
            <form class="layui-form" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">原始密码:</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">辅助文字</div>-->
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码:</label>
                    <div class="layui-input-inline">
                        <input type="password" name="new-password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">辅助文字</div>-->
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码:</label>
                    <div class="layui-input-inline">
                        <input type="password" name="new-password2" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">辅助文字</div>-->
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: "post",// http请求方法
                url:"/empl/change/pwd",// 后端的接口
                data: data.field,// 传递到后端的数据
                dataType: "json", // 后端返回的数据类型
                success: function (res) {// 服务器成功响应之后对应的逻辑
                    console.log(res);
                    layer.msg(res.msg, {icon: res.code === 200 ? 6 : 5}, function(){
                        if (res.code === 200){

                        }
                    });
                }
            });
            return false;
        });
    });

    function change(elm){
        if(elm.innerText == '编辑'){
            elm.innerText = '保存';
            var cnt_elm_id = elm.getAttribute('controls');
            var textarea = document.getElementById(cnt_elm_id);
            textarea.style.color = 'black';
            textarea.removeAttribute('disabled');
        }else {

            var cnt_elm_id = elm.getAttribute('controls');
            var textarea = document.getElementById(cnt_elm_id);
            var context = textarea.value;
            $.ajax({
                type: "post",// http请求方法
                url:"/empl/change/"+cnt_elm_id+"/"+context,// 后端的接口
                // data: {emplId: emplId},// 传递到后端的数据
                dataType: "json", // 后端返回的数据类型
                success: function (res) {// 服务器成功响应之后对应的逻辑
                    console.log(res);
                    layer.msg(res.msg, {icon: res.code === 200 ? 6 : 5}, function(){
                        if (res.code === 200){
                            elm.innerText = '编辑';
                            textarea.style.color = 'gray';
                            textarea.setAttribute('disabled', 'disabled');
                        }
                    });
                }
            });

        }
    }
</script>






</body>

</html>